<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../dist/css/details.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/details.js"></script>
   

</head>

<body>
    <header>
        <div class="head">
            <span class="head-left">
                您好，欢迎来到
                <em>中酒网</em>
                <a href="./index.html">去首页</a>
            </span>
            <ul class="denglu">
                <li>
                    <a href="./login.html">去登陆</a>
                </li>
                <li>|</li>

                <li>
                    <a href="./regsiter.html">免费注册</a>
                </li>
            </ul>
            <ul class="head-right">
                <li class="dropdown">
                    <button class="dropbtn">我的中酒网</button>
                    <div class="dropdown-content">
                        <a href="">已买到的商品</a>
                        <a href="">我关注的商品</a>
                        <a href="">我关注的店铺</a>
                    </div>
                </li>
                <li class="dropdown">
                    <button class="dropbtn">购物车0件</button>
                </li>
                <li class="dropdown">
                    <button class="dropbtn">微信端</button>
                    <div class="dropdown-content">
                        <img src="../img/index/mob.jpg">
                    </div>
                </li>
                <li class="dropdown">
                    <button class="dropbtn">APP</button>
                    <div class="dropdown-content">
                        <img style="width: 90px;height: 90px;" src="../img/index/qrCode.png">
                    </div>
                </li>
                <li class="dropdown">
                    <button class="dropbtn">卖家中心</button>
                </li>
                <li class="dropdown">
                    <button class="dropbtn">顾客服务</button>
                    <div class="dropdown-content">
                        <a href="//www.runoob.com">商户</a>
                        <a href="//www.runoob.com">平台准则</a>
                    </div>
                </li>
                <li class="dropdown">
                    <button class="dropbtn" style="width: 200px;">订购热线：400-798-9999</button>

                </li>
                <!-- <li class="li2">
                    <a href="">购物车0</a>
                </li>
                <li class="li2">
                    <a href="">购物车0</a>
                </li>
                <li class="li2">
                    <a href="">购物车0</a>
                </li>
                <li class="li2">
                    <a href="">购物车0</a>
                </li>
                <li class="li2">
                    <a href="">购物车0</a>
                </li>
                <li class="li2">
                    <a href="">购物车0</a>
                </li> -->

            </ul>

        </div>
    </header>
    <div class="top">
        <div class="top-main">
            <div class="left-log">
                <img src="../img/index/logo.png" alt="" />
                <img src="../img/index/gif.gif" alt="" />
            </div>
            <div class="sousuo">
                <div class="shangpin">
                    商品
                </div>
                <input type="text" class="shuru">
                <input type="text" value="搜索" class="sousuo1">
            </div>
            <div class="xifeng">
                <a href="" class="active">西凤</a>
                <a href="">青稞酒</a>
                <a href="">洋河</a>
                <a href="">习酒</a>
                <a href="">小糊涂仙</a>
                <a href="">酒鬼酒</a>
                <a href="">张裕</a>
                <a href="">拉菲</a>
                <a href="">董酒</a>
                <a href="">华夏长城</a>
            </div>
            <div class="right-log">
                <img src="../img/index/满减.jpg" alt="" />
            </div>
        </div>
    </div>
    <nav>
        <div class="nav-content">
            <div class="nav-fenlei">
                <a href="./list.html">全部商品分类</a>

            </div>
            <div class="nav-shouye">
                <ul>
                    <li>
                        <a href="./index.html">首页</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 大盒子 -->
    <div class="big-box">
        <div class="w">
            <div class="breadcrumb">
                <strong><a href="">全部</a></strong><span>&nbsp;&gt;&nbsp;
                    <a href="">白酒</a>&nbsp;&gt;&nbsp;
                    <a href="">天佑德</a>&nbsp;&gt;&nbsp;
                    <a>天佑德纯净型2瓶（42度275）</a>
                </span>
            </div>
        </div>
        <div class="box-main">
            <div class="box_zuo1">
                <div class="min">
                    <img src="../img/details/1.png" class="zhaopian" />
                    <div class="fd"></div>
                </div>
                <div class="max">
                    <img src="../img/details/1.png" class="zhaopian" />
                </div>
            </div>
            <div class="box_zuo2">
                <span>
                    <img src="../img/details/1_50.jpg" class="zhaopian">
                    <img id="#2_50" src="../img/details/2_50.jpg" class="zhaopian">
                    <img id="#3_50" src="../img/details/3_50.jpg" class="zhaopian">
                    <img id="#4_50" src="../img/details/4_50.jpg" class="zhaopian">
                    <img id="#5_50" src="../img/details/5_50.jpg" class="zhaopian">
                </span>
                <div class="box_zuo3">
                    <img src="../img/details/1_50.jpg" class="zhaopian">

                </div>

            </div>
            <div class="box_you">
                <div class="box_you1">
                    <p class="qq" style="color: rgb(8 130 14 / 62%);">53°赖茅传承蓝500ml</p>
                    <p style="color: rgb(15, 14, 14);font-size: 15px;">&nbsp;&nbsp;&nbsp;(每个ID限购5件)</p>
                    <div class="box_you1_1">
                        <div class="box_you1_1zuo">
                            <p>￥518</p>
                            <span>|</span>
                        </div>
                        <!-- <span style="color: #fff;">|</span> -->
                        <div class="box_you1_1you">
                            <p>已售出0.000瓶</p>
                        </div>

                    </div>

                </div>
                <div class="box_you2">
                    <div class="box_you2_zuo">
                        <!-- --------------- 数量---------------------------------------------------------------------->
                        <ul class="choose">
                            <li id="choose-amount">
                                <div class="dt">数量：</div>
                                <div class="dd">
                                    <div class="wrap-input">
                                        <a class="btn-reduce">-</a>
                                        <a class="btn-add">+</a>
                                        <input class="text" id="buy-num" value="1">
                                    </div>
                                </div>
                            </li>
                            <li id="choose-result">
                                <div class="dt"></div>
                                <div class="dd"><strong></strong><strong></strong></div>
                            </li>
                            <li>
                                <a class="but_goumai addBtn">立即购买</a>
                            </li>
                        </ul>
                        <!-- ------------------------------------------数量 ---------------------------------------->
                    </div>
                    <!-- 倒计时 -->
                    <div class="box_you2_you">
                        <div class="time"></div>
                    </div>
                    <!-- 倒计时 -->
                    <div class="fuwu">
                        <span>服务</span>
                        <span>
                            <img src="../img/details/TimelyDelivery.jpg">
                        </span>
                        <span>及时发货</span>
                    </div>
                </div>


            </div>
        </div>


    </div>

    <!-- 大盒子 -->
    <div class="deta" style="width: 500px;height: 500px;margin: 0 auto;">

  
    </div>

    <script type="text/javascript">
        //放大镜
        $(function () {
            // 1.鼠标覆盖min 显示放大镜
            $('.min').mousemove(function (e) {
                $('.max').show()
                $('.enlarge').show()
                // 放大镜移动
                // pageX/Y 相对于body内容的x/y(滚动条变化时跟随变化)
                // offset().left 相当于 offsetLeft
                var x = e.pageX - $('.min').offset().left - $('enlarge').width() / 2
                var y = e.pageY - $('.min').offset().top - $('.enlarge').height() / 2
                // 最大移动范围
                var maxX = $('.min').width() - $('.enlarge').width()
                var maxY = $('.min').height() - $('.enlarge').height()
                // 范围约束
                if (x <= 0) {
                    x = 0;
                } else if (x >= maxX) {
                    x = maxX;
                }
                if (y <= 0) {
                    y = 0;
                } else if (y >= maxY) {
                    y = maxY;
                }
                // 设置位置
                $('.enlarge').css({
                    left: x,
                    top: y
                })
                // 2.放大镜移动 max上的图片等比例移动
                var yidongX = x / maxX
                var yidongY = y / maxY
                $('.max>img').css({
                    left: -yidongX * ($('.max>img').width() - $('.max').width()),
                    top: -yidongY * ($('.max>img').height() - $('.max').height())
                })
            }).mouseout(function () {
                $('.max').hide()
                $('.fd').hide()
            })
        })
    </script>
    <script>
        $(function () {
            //这是点击小图片显示大图片
            $('#1_50').on('click', function () {
                $('.box_zuo3').show()
            })
        })
    </script>
    <script>
        var div = document.querySelector(".time");
        var timer = setInterval(count, 1)
        function count() {
            var current = new Date().getTime();//获取1970-1-1到当前的毫秒值。
            var target = new Date("2022/1/1 00:00:00").getTime();//取2022-1-1到当前的毫秒值。
            var surplus = target - current;     //拿指定日期减去当前日期，得出它们两之间的毫秒值。
            // 毫秒/1000=秒，秒/60=分钟，分钟/60=小时，小时/24=天数
            var day = parseInt(surplus / 1000 / 60 / 60 / 24);
            var hous = parseInt(surplus / 1000 / 60 / 60 % 24);//小时
            var minu = parseInt(surplus / 1000 / 60 % 60);//分钟
            var sec = parseInt(surplus / 1000 % 60);//秒数
            // var mill=parseInt(surplus%1000);//毫秒
            day = day < 10 ? "0" + day : day;//让天数小于10显示的是09，08，否则显示的就是9或8
            hous = hous < 10 ? "0" + hous : hous;
            minu = minu < 10 ? "0" + minu : minu;
            // sec=sec<10?"0"+sec:sec;
            // if(mill<100){
            //     mill+="0"
            // }else if(mill<10){
            //     mill+="00"      
            // }
            div.innerHTML = "还剩:" + day + "天" + hous + "小时" + minu + "分钟" + sec + "秒";
        }
    </script>

</body>

</html>